<template>
    <div id="myChart" style="width: 100%; height: 100%"></div>

</template>

<script>
    export default {
        name: "blind",
        data() {
            return {
                percent1: 30,
                percent2: 70,
                year: "2018-10-20",
                time: "10:05:03",
            };
        },
        components:{
        },
        mounted() {
            this.drawLine(); //执行下面的函数
        },
        methods: {
            async drawLine() {
                // var i=0;
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("myChart"));
                let that = this;
                myChart.on("click", function (params) {
                    that.$router.push({ name: "detail", params: { user: params.name } });
                });
                // var color = ["#19D672", "#FD517D"];
                // 绘制图表
                function updateChart(data) {
                    var option = {
                        color: ["#FF0000", "#00FF"],
                        tooltip: {
                            trigger: "axis",
                            axisPointer: {
                                // 坐标轴指示器，坐标轴触发有效
                                type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
                            },
                            confine: true,
                        },
                        legend: {
                            data: ["正确字符数", "打字速度"],
                        },
                        grid: {
                            left: 20,
                            right: 20,
                            bottom: 15,
                            top: 50,
                            containLabel: true,
                        },
                        xAxis: [
                            {
                                type: "value",
                                axisLine: {
                                    lineStyle: {
                                        color: "#999",
                                    },
                                },
                                axisLabel: {
                                    color: "#666",
                                },
                            },
                        ],
                        yAxis: [
                            {
                                type: "category",
                                axisTick: { show: false },
                                data: ["07190999崔宇"],
                                axisLine: {
                                    lineStyle: {
                                        color: "#000000",
                                    },
                                },
                                axisLabel: {
                                    color: "#FF8000",
                                },
                            },
                        ],
                        series: [
                            {
                                name: "正确字符数",
                                type: "bar",
                                label: {
                                    normal: {
                                        show: true,
                                    },
                                },
                                data: [120],
                            },

                            {
                                name: "打字速度",
                                type: "bar",
                                stack: "总量",
                                label: {
                                    normal: {
                                        show: true,
                                    },
                                },
                                data: [110],
                                itemStyle: {
                                    // emphasis: {
                                    //   color: '#67e0e3'
                                    // }
                                },
                            },
                        ],
                    };
                    option.yAxis[0].data = [];
                    option.series[0].data = [];
                    option.series[1].data = [];
                    data.forEach((v) => {
                        option.yAxis[0].data.push(v.name);
                        option.series[0].data.push(v.total);
                        option.series[1].data.push(v.blind_speed);
                    });
                    console.log(data);
                    myChart.setOption(option);
                }
                let res = "";
                res = await this.$cloudbase
                    .auth({ persistence: "local" })
                    .anonymousAuthProvider()
                    .signIn();
                console.log(res);
// updateChart()
                const _ = this.$cloudbase.database().command;
                let watcher = this.$cloudbase
                    .database()
                    .collection("typing_contest")
                    .where({ blind_speed: _.gt(0) })
                    .field({
                        _id: false,
                        name: true,
                        blind_speed: true,
                        blind_ratio: true,
                    })
                    .orderBy("blind_speed", "desc")
                    .limit(50)
                    .watch({
                        onChange(snapshot) {
                            console.log(snapshot.docs);
                            //排序
                            let list = snapshot.docs;
                            list.forEach((v) => {
                                v.total = Math.floor((v.blind_str.length * v.blind_ratio) / 100);
                            });
                            list.sort(function (v1, v2) {
                                return parseInt(v1.total) - parseInt(v2.total);
                            });
                            console.log("sorted", list);
                            updateChart(list);
                        },
                        onError(err) {
                            console.error("the watch closed because of error", err);
                        },
                    });
                console.log(watcher);
            }
        }
    }
</script>

<style scoped>

</style>